<template>
    <div class="form-container">
        <el-form :model="form" label-width="150px" :rules="rules" ref="ruleFormRef">
            <el-form-item label="分类名称:" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="上级分类:">
                <el-select v-model="form.parentId" placeholder="无上级分类">
                    <el-option label="无上级分类" :value="0" />
                    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量单位:">
                <el-input v-model="form.productUnit" />
            </el-form-item>
            <el-form-item label="排序:">
                <el-input v-model="form.sort" />
            </el-form-item>
            <el-form-item label="是否显示:">
                <el-radio-group v-model="form.showStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否显示在导航栏:">
                <el-radio-group v-model="form.navStatus">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分类图标:">
                <el-upload ref="uploadRef" action="http://127.0.0.1:5173/api/productAttribute/create" :limit="1"
                    :on-exceed="handleExceed" :auto-upload="false" list-type="picture">
                    <template #trigger>
                        <el-button type="primary">上传</el-button>
                    </template>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件,且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <template v-for="item, index in form.productAttributeIdList">
                <el-form-item :label="index == 0 ? '筛选属性:' : ''">
                    <el-cascader :options="productAttributeList" @change="handleChange(index)" placeholder="请选择"
                        :props="{ label: 'name', value: 'id', children: 'productAttributeList' }" v-model="pid[index]">
                    </el-cascader>
                    <el-button style="margin-left: 20px;" @click="delItem(index)">删除</el-button>
                </el-form-item>
            </template>
            <el-form-item label="">
                <el-button type="primary" @click="addItem">新增</el-button>
            </el-form-item>
            <el-form-item label="关键词:">
                <el-input v-model="form.keywords"></el-input>
            </el-form-item>
            <el-form-item label="分类描述:">
                <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="Reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>
    
<script setup lang='ts'>
import useTable from '@/hooks/useTable';
import { ElMessage, FormInstance, FormRules, genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ApiAddProductCategory, ApiGetProductCategoryList, ApiGetProductCategoryWithAttr } from './api';
// 规则
const rules = reactive<FormRules>({
    name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
})
const upload = ref<UploadInstance>()
const route = useRoute()
const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
}
//添加属性选择器
const addItem = () => {
    form.productAttributeIdList.push(0)
    pid.value.push([])
}
// 删除属性选择器
const delItem = (i: number) => {
    if (form.productAttributeIdList.length > 1) {
        form.productAttributeIdList.splice(i, 1)
        pid.value.splice(i, 1)
    } else {
        ElMessage.warning("至少要留一个")
    }

}
// 属性列表
const productAttributeList = ref<IProductAttr[]>();
// 属性选择器绑定的值
const pid = ref<[[]]>([[]])
// 属性选择器改变时
const handleChange = (i: number) => {
    form.productAttributeIdList[i] = pid.value[i].slice(-1)[0]
    console.log(form.productAttributeIdList);
}
// 获取全部属性
ApiGetProductCategoryWithAttr().then(res => {
    if (res.code == 200) {
        productAttributeList.value = res.data
    }
})
const ruleFormRef = ref<FormInstance>()
// 添加分类
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            ApiAddProductCategory(form).then(res => {
                if (res.code == 200) {
                    ElMessage.success("添加成功")
                    Reset()
                } else {
                    ElMessage.error("添加失败")
                }
            })
        } else {
            ElMessage.warning("请填写必填信息")
        }
    })
}
// 重置
const Reset = () => {
    form.description = ""
    form.icon = ""
    form.keywords = ""
    form.name = ""
    form.navStatus = 0
    form.parentId = 0
    form.productAttributeIdList = [0]
    form.productUnit = ""
    form.showStatus = 0
    form.sort = 0
    pid.value = [[]]
}
const form = reactive<productCategoryParam>({
    description: "",
    icon: "",
    keywords: "",
    name: "",
    navStatus: 0,
    parentId: 0,
    productAttributeIdList: [0],
    productUnit: "",
    showStatus: 0,
    sort: 0
})
const params = reactive({
    parentId: 0,
    pageNum: 1,
    pageSize: 100,
})
const {
    list,
    pageNum,
    pageSize,
    total,
    pageChangeHandle,
    pageSizeChangeHandle,
    searchHandle,
} = useTable(ApiGetProductCategoryList, params);
</script>
    
<style>
.form-container {
    width: 720px;
    padding: 35px 35px 15px 35px;
    margin: 20px auto;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}
</style>